<template>
  <el-menu @select="handleSelect">
    <MenuTreeItem :treeData="routerMenu" />
  </el-menu>
</template>

<script setup>
import { reactive } from 'vue'
import MenuTreeItem from './menuTreeItem.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const routerMenu = reactive([
  {
    label: '工作门户',
    path: 'gateway',
    index: '1',
  },
  {
    label: '感知监测',
    index: '2',
    path: 'perception',
    children: [
      {
        label: '水位流量监管',
        path: 'water',
        index: '2-1',
      },
      {
        label: '视频监控',
        path: 'video',
        index: '2-2',
      },
      {
        label: '无人机巡河',
        path: 'UAV',
        index: '2-3',
      },
      {
        label: '卫星遥感',
        index: '2-4',
        path: 'satelliteRemote',
        children: [
          {
            label: '图班列表',
            path: 'UAV1',
            index: '2-4-1',
          },
          {
            label: '图班复核',
            path: 'UAV2',
            index: '2-4-2',
          },
        ],
      },
    ],
  },
])

const handleSelect = (key, keyPath) => {
  let fullpath = '/'
  let i = 0
  for (i = 0; i < keyPath.length; i++) {
    fullpath += keyPath[i] + '/'
  }
  router.push({
    path: fullpath,
  })
}
</script>
